/*
 * @Author: Wxx
 * @Date: 2022-02-22 10:02:39
 * @LastEditors: Wxx
 * @LastEditTime: 2022-02-22 10:26:14
 * @Description:
 */
import React, { Component } from "react";
import Swiper, { Navigation, Pagination } from "swiper";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";

export default class App extends Component {
  state = {
    list: [1, 2, 3],
  };
  componentDidMount() {
    const swiper = new Swiper(".swiper", {
      modules: [Navigation, Pagination],
      pagination: {
        el: ".swiper-pagination",
      },
    });
  }
  render() {
    return (
      <div>
        <div
          className="swiper"
          style={{ height: "200px", background: "yellow" }}
        >
          <div className="swiper-wrapper">
            {this.state.list.map((item) => (
              <div key={item} className="swiper-slide">
                Slide{item}
              </div>
            ))}
          </div>
          <div className="swiper-pagination"></div>
        </div>
      </div>
    );
  }
}
